<template>
  <div id="components-modal-demo-position">
    <a-button
      type="primary"
      @click="modalVisible = true"
      style="font-size: 18px"
    >
      添加
    </a-button>
    <a-modal
      v-model:visible="modalVisible"
      title="添加实验过程"
      centered
      @ok="modalVisible = false"
      :footer="null"
      bodyStyle="width:600px;"
    >
      <a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="实验名称">
          <a-select
            v-model:value="form.type.experiment_name"
            placeholder="请选择对应的实验名称"
          >
            <a-select-option
              v-for="item in experimentNameSelectionList"
              :key="item.experiment_name.url"
            >
              {{ item.experiment_name.experiment_name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="实验方案名称">
          <a-select
            v-model:value="form.type.experiment_program_name"
            placeholder="请选择对应的方案名称"
          >
            <a-select-option
              v-for="item in experimentProgramNameSelectionList"
              :key="item.experiment_program_name.url"
            >
              {{ item.experiment_program_name.experiment_program_name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="实验编码">
          <a-input v-model:value="form.type.experiment_code" />
        </a-form-item>
        <a-form-item label="实验原理">
          <a-input v-model:value="form.type.experimental_principle" />
        </a-form-item>
        <a-form-item label="实验记录">
          <a-input v-model:value="form.type.experiment_record" />
        </a-form-item>
        <a-form-item label="实验现象">
          <a-input v-model:value="form.type.experiment_phenomena" />
        </a-form-item>
        <a-form-item label="原料名称">
          <a-input v-model:value="form.type.raw_material_name" />
        </a-form-item>
        <a-form-item label="纯度">
          <a-input v-model:value="form.type.purity" />
        </a-form-item>
        <a-form-item label="原料来源">
          <a-input v-model:value="form.type.raw_material_source" />
        </a-form-item>
        <a-form-item label="设备名称">
          <a-input v-model:value="form.type.equipment_name" />
        </a-form-item>
        <a-form-item label="设备厂家">
          <a-input v-model:value="form.type.equipment_manufacturer" />
        </a-form-item>
        <a-form-item label="设备型号">
          <a-input v-model:value="form.type.device_model" />
        </a-form-item>
        <a-form-item label="数量">
          <a-input v-model:value="form.type.quantity" />
        </a-form-item>
        <a-form-item label="实验步骤">
          <a-input v-model:value="form.type.equipment_steps" />
        </a-form-item>
        <a-form-item label="样品编号">
          <a-input v-model:value="form.type.sample_num" />
        </a-form-item>
        <a-form-item label="实验预期">
          <a-input v-model:value="form.type.experimental_expectation" />
        </a-form-item>
        <a-form-item label="审核人">
          <a-select
            v-model:value="form.type.experiment_procedure_reviewer"
            placeholder="请选择对应的审核人名称"
          >
            <a-select-option
              v-for="item in experimentProcedureReviewerSelectionList"
              :key="item.experiment_procedure_reviewer.url"
            >
              {{ item.experiment_procedure_reviewer.username }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">
            添加
          </a-button>
          <a-button style="margin-left: 10px;" @click="modalVisible = false">
            取消
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
  <div>
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="{ pageSize: 50 }"
      :scroll="{ x: 240 }"
    />
  </div>
</template>
<script>
//import Axios from 'axios'

const columns = [
  {
    title: '实验名称',
    dataIndex: 'experiment_name',
    width: 150,
  },
  {
    title: '实验方案名称',
    dataIndex: 'experiment_program_name',
    width: 150,
  },
  {
    title: '实验编码',
    dataIndex: 'experiment_code',
    width: 150,
  },
  {
    title: '实验原理',
    dataIndex: 'experimental_principle',
    width: 150,
  },
  {
    title: '实验记录',
    dataIndex: 'experiment_record',
    width: 150,
  },
  {
    title: '实验现象',
    dataIndex: 'experiment_phenomena',
    width: 150,
  },
  {
    title: '原料名称',
    dataIndex: 'raw_material_name',
    width: 150,
  },
  {
    title: '纯度',
    dataIndex: 'purity',
    width: 150,
  },
  {
    title: '原料来源',
    dataIndex: 'raw_material_source',
    width: 150,
  },
  {
    title: '设备名称',
    dataIndex: 'equipment_name',
    width: 150,
  },
  {
    title: '设备厂家',
    dataIndex: 'equipment_manufacturer',
    width: 150,
  },
  {
    title: '设备型号',
    dataIndex: 'device_model',
    width: 150,
  },
  {
    title: '数量',
    dataIndex: 'quantity',
    width: 150,
  },
  {
    title: '实验步骤',
    dataIndex: 'equipment_steps',
    width: 150,
  },
  {
    title: '样品编号',
    dataIndex: 'sample_num',
    width: 150,
  },
  {
    title: '实验预期',
    dataIndex: 'experimental_expectation',
    width: 150,
  },
  {
    title: '审核人',
    dataIndex: 'experiment_procedure_reviewer',
    width: 150,
  },
]

// const data = []
// let data = []
// for (let i = 0; i < 100; i++) {
//   data.push({
//     key: i,
//     name: `Edward King ${i}`,
//     age: 32,
//     address: `London, Park Lane no. ${i}`,
//   })
// }

//Axios.defaults.baseURL = '/api'

export default {
  name: 'ExperimentProcedure',
  data() {
    return {
      experimentNameSelectionList: [],
      experimentProgramNameSelectionList: [],
      experimentProcedureReviewerSelectionList: [],
      data: [],
      loading: false,
      columns,
      modalVisible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    fetch() {
      this.data = []
      this.loading = true
      this.axios
        .get('/experiment_management/experiment_procedure/')
        .then((res) => {
          let data = res.data
          for (let i = 0; i < res.data.length; ++i) {
            let experiment_name = null
            this.axios
              .get(data[i].experiment_name)
              .then((res) => {
                experiment_name = res.data.experiment_name
                let experiment_program_name = null
                this.axios
                  .get(data[i].experiment_program_name)
                  .then((res) => {
                    experiment_program_name = res.data.experiment_program_name
                    //this.axios.get(data[i].experiment_program_name)
                    let experiment_procedure_reviewer = null
                    this.axios
                      .get(data[i].experiment_procedure_reviewer)
                      .then((res) => {
                        experiment_procedure_reviewer = res.data
                        this.data.push({
                          key: i,
                          experiment_name: experiment_name,
                          experiment_program_name: experiment_program_name,
                          experiment_code: data[i].experiment_code,
                          experimental_principle:
                            data[i].experimental_principle,
                          experiment_record: data[i].experiment_record,
                          experiment_phenomena: data[i].experiment_phenomena,
                          raw_material_name: data[i].raw_material_name,
                          purity: data[i].purity,
                          raw_material_source: data[i].raw_material_source,
                          equipment_name: data[i].equipment_name,
                          equipment_manufacturer:
                            data[i].equipment_manufacturer,
                          device_model: data[i].device_model,
                          quantity: data[i].quantity,
                          equipment_steps: data[i].equipment_steps,
                          sample_num: data[i].sample_num,
                          experimental_expectation:
                            data[i].experimental_expectation,
                          experiment_procedure_reviewer:
                            experiment_procedure_reviewer.username,
                        })
                      })
                      .catch((error) => {
                        console.log('Error', error.message)
                      })
                  })
                  .catch((error) => {
                    console.log('Error', error.message)
                  })
              })
              .catch((error) => {
                console.log('Error', error.message)
              })
          }
        })
        .catch((error) => {
          console.log('Error', error.message)
        })
      this.axios
        .get('/experiment_management/experiment_information')
        .then((res) => {
          // console.log(res.data)
          for (let i = 0; i < res.data.length; ++i) {
            this.experimentNameSelectionList.push({
              key: i,
              experiment_name: res.data[i],
            })
          }
        })
      this.axios.get('/experiment_management/experiment_design').then((res) => {
        // console.log(res.data)
        for (let i = 0; i < res.data.length; ++i) {
          this.experimentProgramNameSelectionList.push({
            key: i,
            experiment_program_name: res.data[i],
          })
        }
      })
      this.axios.get('/user_management/users').then((res) => {
        // console.log(res.data)
        for (let i = 0; i < res.data.length; ++i) {
          this.experimentProcedureReviewerSelectionList.push({
            key: i,
            experiment_procedure_reviewer: res.data[i],
          })
        }
      })
    },
    onSubmit() {
      this.axios
        .post('/experiment_management/experiment_procedure/', {
          experiment_name: this.form.type.experiment_name,
          experiment_program_name: this.form.type.experiment_program_name,
          experiment_code: this.form.type.experiment_code,
          experimental_principle: this.form.type.experimental_principle,
          experiment_record: this.form.type.experiment_record,
          experiment_phenomena: this.form.type.experiment_phenomena,
          raw_material_name: this.form.type.raw_material_name,
          purity: this.form.type.purity,
          raw_material_source: this.form.type.raw_material_source,
          equipment_name: this.form.type.equipment_name,
          equipment_manufacturer: this.form.type.equipment_manufacturer,
          device_model: this.form.type.device_model,
          quantity: this.form.type.quantity,
          equipment_steps: this.form.type.sample_num,
          sample_num: this.form.type.equipment_steps,
          experimental_expectation: this.form.type.experimental_expectation,
          experiment_procedure_reviewer: this.form.type
            .experiment_procedure_reviewer,
        })
        .then(() => {
          this.fetch()
        })
        .catch((error) => {
          console.log('Error', error.message)
          alert('添加失败！')
        })
      // console.log('submit!', this.form.type)
      this.modalVisible = false
    },
  },
}
</script>

<style>
#components-modal-demo-position {
  text-align: end;
  padding: 10px;
}
</style>
